<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="js/vue.js"></script>
  <script src="js/axios.js"></script>
  <script src="js/elementui.js"></script>
  <link rel="stylesheet" href="css/index.css">
  </link>
</head>

<body>
  <div id="app">
    <template>
      <div class="register-container">
        <el-card class="register-card" shadow="hover">
          <h2 class="register-title">注册</h2>
          <el-form :model="user" ref="user" :rules="rules" label-width="80px">
            <el-form-item label="用户名" prop="uname">
              <el-input v-model="user.uname" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="upwd">
              <el-input type="password" v-model="user.upwd" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleRegister">注册</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </template>
  </div>
</body>
<style scoped>
  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

  body {
    margin: 0;
    font-family: 'Poppins', sans-serif;
  }

  .register-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: linear-gradient(to right, #00ffbf, #3dcaf1);
  }

  .register-card {
    width: 400px;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.9);
    animation: fadeInUp 1s ease-out;
  }

  .register-title {
    text-align: center;
    margin-bottom: 20px;
    color: #333;
  }

  .el-form-item {
    margin-bottom: 20px;
  }

  .el-button--primary {
    background: #ff7e5f;
    border-color: #ff7e5f;
  }

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
</style>
<script>
  new Vue({
    el: "#app",
    data: {
      user: {
        uname: '',
        upwd: '',
      },
      rules: {
        uname: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ],
        upwd: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
        ],
      }
    },
    methods: {
      validateConfirmPassword(rule, value, callback) {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        }
      },
      handleRegister() {
        axios.post('http://localhost:8080/register', this.user).then((res) => {
          console.log(res);
          if (res.data) {
            this.$message.success("注册成功！正在跳转...");
            // 跳转到首页
            setTimeout(() => {
              sessionStorage.setItem("username", this.user.uname)
              sessionStorage.setItem("password", this.user.upwd)
              location.href = 'index.html'
            }, 1000);
          } else {
            this.$message.error("注册失败!");
          }
        })
      }
    }
  })
</script>

</html>